<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router-3.6.5.js"></script>
</head>
<body>

<!--
     路由嵌套
-->

<div id="app">
    <router-view></router-view>
</div>

<script>

    // 定义路由组件   智能穿戴
    const smartWearables = {
        template: `
        <div style="width: 500px;height: 400px;border: 1px solid black">
           <h3 style="display: inline-block;margin-right: 350px">智能穿戴</h3>
           <router-link to="/earphone">耳机</router-link>
           <router-link to="/apparel">穿戴</router-link>
           <hr>
<!--           二级路由的出口位置-->
           <router-view></router-view>
        </div>
    `
    }

    // 耳机
    const earphone = {
        template: `

            <div style="width: 200px;height: 200px;border: 1px solid blue;font-size: 30px">
               耳机
            </div>

        `
    }
    // 穿戴
    const apparel = {
        template: `

            <div style="width: 200px;height: 200px;border: 1px solid green;font-size: 30px">
               穿戴
            </div>

        `
    }


    // 配置路由列表   路由嵌套
    const routes = [
        {
            path: "/",
            component: smartWearables,
            children:[
                {
                    path: "/earphone",
                    component: earphone
                },
                {
                    path: "/apparel",
                    component: apparel
                }
            ]
        }
    ]

    const router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            SmartWearables: smartWearables
        },
        router
    })

</script>
</body>
</html>